<%# locals: (active_tab:, account_id: nil) %>

<fieldset class="bg-surface-inset rounded-lg p-1 grid grid-flow-col justify-stretch gap-x-2">
  <%= link_to new_transaction_path(nature: "outflow", account_id: account_id),
              data: { turbo_frame: :modal },
              class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-sm #{active_tab == 'expense' ? 'bg-container text-primary shadow-sm' : 'hover:bg-container text-subdued hover:text-primary hover:shadow-sm'}" do %>
    <%= icon "minus-circle" %>
    <%= tag.span t("shared.transaction_tabs.expense") %>
  <% end %>

  <%= link_to new_transaction_path(nature: "inflow", account_id: account_id),
              data: { turbo_frame: :modal },
              class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-sm #{active_tab == 'income' ? 'bg-container text-primary shadow-sm' : 'hover:bg-container text-subdued hover:text-primary hover:shadow-sm'}" do %>
    <%= icon "plus-circle" %>
    <%= tag.span t("shared.transaction_tabs.income") %>
  <% end %>

  <%= link_to new_transfer_path,
              data: { turbo_frame: :modal },
              class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-sm #{active_tab == 'transfer' ? 'bg-container text-primary shadow-sm' : 'hover:bg-container text-subdued hover:text-primary hover:shadow-sm'}" do %>
    <%= icon "arrow-right-left" %>
    <%= tag.span t("shared.transaction_tabs.transfer") %>
  <% end %>
</fieldset>
